<template>
  <div>
    <div
      v-for="(item, coin) in ownedCoins"
      :key="coin"
      class="coin-card"
    >
      <div class="card-item-1 flexbox">
        <div class="coin-wrap flex-3">
          <img
            :src="item.icon"
            class="coin-logo"
          />
          <span class="coin-name">{{ item.name }}</span>
        </div>
        <div class="flex-3 flexbox">
          <nuxt-link
            class="btn btn-recharge"
            :to="`/fund/recharge?coin=${item.name}`"
          >
            <span class="recharge">{{ $t('充值') }}</span>
          </nuxt-link>
          <nuxt-link
            class="btn btn-withdraw"
            :to="`/fund/withdraw?coin=${item.name}`"
          >
            <span class="withdraw">{{ $t('提现') }}</span>
          </nuxt-link>
        </div>
      </div>
      <nuxt-link
        :to="`fund/coin-balance?coin=${item.name}`"
        class="flexbox border-top"
      >
        <div class="flex-2 flexbox">
          <span class="balance">{{ $t('余额') }}</span>
          <span class="balance-value">{{ item.total_amount | numberFormat(8) }} {{ item.unit }}<i class="iconfont icon-jiantouarrow487"></i></span>
        </div>
        <!-- <div class="flex-1 tar">
          USDT
          <i class="iconfont icon-jiantouarrow487"></i>
        </div> -->
      </nuxt-link>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      ownedCoins: ({ fund }) => fund.ownedCoins
    })
  }
}
</script>
<style scoped>
* {
  box-sizing: border-box;
}
.coin-card {
  background-color: #fff;
  padding: 0 15px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.flexbox {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex-3 {
  flex: 3;
}
/* .card-item-1 {
  height: 46px;
  align-items: center;
} */
.coin-wrap {
  display: flex;
  align-items: center;
}
.coin-logo {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}
.coin-name {
  color: #383131;
  font-size: 16px;
  font-weight: bold;
}
.btn {
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 2px;
}
.btn-recharge {
  background-color: #007aff;
}
.recharge {
  font-size: 12px;
  color: white;
  padding: 5px;
}
.btn-withdraw {
  border: 1px solid #007aff;
}
.withdraw {
  font-size: 12px;
  color: #007aff;
  padding: 5px;
}
.banance {
  color: #727272;
  font-size: 12px;
}
.banance-value {
  font-size: 12px;
  color: #264258;
}
.tar {
  text-align: right;
}
.border-top {
  border-top: 1px solid #eee;
  height: 45px;
}
</style>
